import React, { Component } from 'react';
import { Button, Radio, Form, Input, Row, Col, Cascader, Tree, Tag } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
@Form.create()
export default class ${classname}Add extends Component {
  state = {
    current: 0

  }
  componentDidMount() {
  }

  next() {
    this.props.form.validateFields([
        #foreach ($column in $columns)
          '$column.attrname',
        #end
    ], (err) => {
      if (!err) {
        const current = this.state.current + 1;
        this.setState({ current });
      }
    });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  submit = () => {
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: '${classname}/add',
          payload: values,
        });
      }
    });
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const { getFieldDecorator } = this.props.form;
    const steps = [{
      title: 0,
      keyi: 0,
      content: (
        <Row gutter={{ xs: 8, sm: 16, md: 24 }} align="left">
          <Col>
            <Form>
              #foreach ($column in $columns)
               <FormItem {...formItemLayout} label="$column.comments">
                  {getFieldDecorator('$column.attrname', {
                      rules: [],
                    })(<Input/>)}
                </FormItem>
              #end
            </Form>
          </Col>
        </Row>
      ),
    }];
    return (
      <PageHeaderLayout>
        <div>
          {/* <div className="steps-content">{steps[this.state.current].content}</div> */}
          {steps.map((item) => {
            return <div style={item.title === this.state.current ? { display: 'block' } : { display: 'none' }}>{item.content}</div>;
          })}
          <Row className="steps-action">
            {
              this.state.current === steps.length - 1
              &&
              <Col span={1} offset={3}><Button type="primary" onClick={this.submit}>提交</Button></Col>
            }
          </Row>
        </div>
      </PageHeaderLayout>
    );
  }
}
